<template>
  <a-modal title="流程详情" width="950px" :visible="visible" :confirm-loading="confirmLoading" @ok="handleOk" v-drag-modal
    destroynClose @cancel="handleCancel">
    <h2>{{ processName }}</h2>
    <!-- <div style="border: 1px solid #ccc; padding: 20px; width: 900px">
      <svg class="dagre" width="890" height="900">
        <g class="container"></g>
      </svg>
    </div>-->
    <a-steps :current="taskProgress" size="small" :initial="0">
      <a-step :title="item.stepName" v-for="(item, index) in stepList" :key="index" />
    </a-steps>
    <div class="infoBox" v-for="item in completionStatusList" :key="item.id">
      <h3>{{ item.processDefineKey }}</h3>
      <div  v-for="item2 in item.frameInfoList" :key="item2.id">
        <hr/>
        <h3>
          <a href="#" @click="analysis(item2.id)" style="float: right;">解析</a>
          <a-popconfirm  title="确定重发吗?" overlayClassName="poperLayTable"  @confirm="() => analysis1(item2.id)">
            <a href="#" v-if="item.action == 0 || item.action == 2"  style="float: right;margin-right:10px">重发</a>
          </a-popconfirm>
        </h3>
        <p>
          {{ item2.frame }}
        </p>
      </div>
    </div>



    <a-drawer width="360" :closable="true" :mask="false" title="解析结果" placement="right"
      :visible="visibleDrawer" :after-visible-change="afterVisibleChange" @close="onClose">
      <div>
        <a-descriptions bordered title :column="1" class="color-dess">
          <a-descriptions-item v-for="item in desList" :key="item.packageGridId" :label="item.packageGridCode">{{
            item.packageGridValue }}</a-descriptions-item>
        </a-descriptions>
      </div>
    </a-drawer>
  </a-modal>
</template>

<script>
import dagreD3 from 'dagre-d3'
import * as d3 from 'd3'
import { httpAction, getAction } from '@/api/manage'
export default {
  name: 'dagre',
  data() {
    return {
      visible: false,

      visibleDrawer: false,
      confirmLoading: false,
      stepList: [],
      processName: '',
      taskProgress: 0,
      completionStatusList: [],
      desList: [],
      url: {
        queryInfo: '/monitor/nmcTaskMonitor/queryInfo',
        getCompletionStatus: "/flow/nmcFlowInst/getCompletionStatus",
        decodeFrame: "/frameInfo/nmcFrameInfo/decodeFrame",
        resendById:'/frameInfo/nmcFrameInfo/resendById'
      },
      currentNode: {
        id: null,
        nodeName: '',
      },
      nodes: [
        {
          id: 0,
          nodeName: '开始',
        },
        {
          id: 1,
          nodeName: '卫星向通信管控发送频谱感知结果信息',
        },
        {
          id: 2,
          nodeName: '通信管控进行上下行链路抗干扰决策分析',
        },
        {
          id: 3,
          nodeName: '星弹链路上行频点是否需要切换',
        },
        {
          id: 4,
          nodeName: '通信管控向指控车发送抗干扰频点切换决策信息',
        },
        {
          id: 5,
          nodeName: '指控车向通信管控回复抗干扰频点切换确认信息',
        },
        {
          id: 6,
          nodeName: '通信管控向卫星发送抗干扰接收机频点配置指令',
        },
        {
          id: 7,
          nodeName: '星弹链路下行速率挡位是否需要切换',
        },
        {
          id: 8,
          nodeName: '通信管控向指控车发送抗干扰速率档位切换决策信息',
        },
        {
          id: 9,
          nodeName: '指控车向通信管控回复抗干扰速率档位切换确认信息',
        },
        {
          id: 10,
          nodeName: '通信管控向卫星发送下行链路速率档位调整指令',
        },
        {
          id: 11,
          nodeName: '通信管控向指控车发送下行链路速率档位信息',
        },
        {
          id: 12,
          nodeName: '结束',
        },
      ],
      edges: [
        {
          start: 0,
          end: 1,
        },
        {
          start: 1,
          end: 2,
        },
        {
          start: 2,
          end: 3,
        },
        {
          start: 3,
          end: 4,
        },
        {
          start: 4,
          end: 5,
        },
        {
          start: 5,
          end: 6,
        },
        {
          start: 6,
          end: 12,
        },
        {
          start: 2,
          end: 7,
        },
        {
          start: 7,
          end: 8,
        },
        {
          start: 8,
          end: 9,
        },
        {
          start: 9,
          end: 10,
        },
        {
          start: 10,
          end: 11,
        },
        {
          start: 11,
          end: 12,
        },
      ],
    }
  },
  watch: {},
  mounted() {
    console.log('创建信的')
  },
  methods: {
    analysis1(id){
      let data=new URLSearchParams(Object.entries({id:id}))
      httpAction(this.url.resendById,data,'post').then(res=>{
        if(res.success){
          this.$message.success(res.message)
        }else{
          this.$message.error(res.message)
          }
      })
    },
    afterVisibleChange(val) {
      console.log('visible', val);
    },
    showDrawer() {
      this.visibleDrawer = true;
    },
    onClose() {
      this.visibleDrawer = false;
    },
    //解析码流
    analysis(id) {
      getAction(this.url.decodeFrame, { id, }).then(res => {
        this.showDrawer()
        this.desList = res.result
      })
    },
    showModal(val) {
      this.visible = true
      getAction(this.url.getCompletionStatus, { flowInstId: val }).then(res => {
        this.completionStatusList = res.result
      })
      getAction(this.url.queryInfo, { id: val }).then((res) => {
        console.log(res)
        // if(res.result &&res.result.stepList){this.stepList =res.result.stepList}
        // this.taskProgress = res.result.taskProgress - 1
        // this.processName = res.result.processName
      })
      // setTimeout(() => {
      //   this.draw()
      // }, 100)
    },
    handleOk(e) {
      // this.confirmLoading = true
      // setTimeout(() => {
      //   this.visible = false
      //   this.confirmLoading = false
      // }, 2000)
    },
    handleCancel(e) {
      console.log('Clicked cancel button')
      this.visible = false
      this.visibleDrawer=false
    },
    // 绘制简单的流程图
    draw() {
      // 创建 Graph 对象
      const g = new dagreD3.graphlib.Graph()
        .setGraph({
          rankdir: 'TB', // 流程图从下向上显示，默认'TB'，可取值'TB'、'BT'、'LR'、'RL'
        })
        .setDefaultEdgeLabel(function () {
          return {}
        })

      // Graph添加节点
      this.nodes.forEach((node) => {
        if (node.id == 3 || node.id == 7) {
          g.setNode(node.id, {
            id: node.id,
            label: node.nodeName,
            shape: 'diamond', //节点形状，可以设置rect(长方形),circle,ellipse(椭圆),diamond(菱形) 四种形状，还可以使用render.shapes()自定义形状
            style: 'fill:transparent;stroke:rgba(255, 252, 255, 0.75)', //节点样式,可设置节点的颜色填充、节点边框
            labelStyle: 'fill: rgba(255, 252, 255, 0.75);font-weight:bold', //节点标签样式, 可设置节点标签的文本样式（颜色、粗细、大小）
            rx: 5, // 设置圆角
            ry: 5, // 设置圆角
            paddingBottom: 15,
            paddingLeft: 20,
            paddingRight: 20,
            paddingTop: 15,
          })
        } else {
          g.setNode(node.id, {
            id: node.id,
            label: node.nodeName,
            shape: 'rect', //节点形状，可以设置rect(长方形),circle,ellipse(椭圆),diamond(菱形) 四种形状，还可以使用render.shapes()自定义形状
            style: 'fill:transparent;stroke:rgba(255, 252, 255, 0.75)', //节点样式,可设置节点的颜色填充、节点边框
            labelStyle: 'fill: rgba(255, 252, 255, 0.75);font-weight:bold;', //节点标签样式, 可设置节点标签的文本样式（颜色、粗细、大小）
            rx: 5, // 设置圆角
            ry: 5, // 设置圆角
            paddingBottom: 15,
            paddingLeft: 20,
            paddingRight: 20,
            paddingTop: 15,
          })
        }
      })

      // Graph添加节点之间的连线
      if (this.nodes.length > 1) {
        this.edges.forEach((edge) => {
          g.setEdge(edge.start, edge.end, {
            style: 'stroke: rgba(255, 252, 255, 0.75); fill: none; stroke-width: 2px', // 连线样式
            arrowheadStyle: 'fill: rgba(255, 252, 255, 0.75);stroke: rgba(0, 0, 0, 0.85);', //箭头样式，可以设置箭头颜色
            arrowhead: 'normal', //箭头形状，可以设置 normal,vee,undirected 三种样式，默认为 normal
          })
        })
      }

      // 获取要绘制流程图的绘图容器
      const container = d3.select('svg.dagre').select('g.container')

      // 创建渲染器
      const render = new dagreD3.render()
      // 在绘图容器上运行渲染器绘制流程图
      render(container, g)
    },
  },
}
</script>
<style>
.ant-descriptions-bordered .ant-descriptions-item-label,.ant-descriptions-bordered .ant-descriptions-item-content{
  background-color: transparent !important;
  color: #fff;
}
/* .ant-descriptions-bordered .ant-descriptions-item-label:last-child, .ant-descriptions-bordered .ant-descriptions-item-content:last-child */
</style>
<style lang="less" scoped>

h2 {
  width: 100%;
  text-align: center;
}

.infoBox {
  border: 1px solid #26fbf3;
  margin: 8px;
  padding: 10px;

  p {
    color: #fff;
    width: 89%;
  }
}

.color-dess .ant-descriptions-item {
  // height: 40px !important;
  // line-height: 40px !important;
}

.color-dess .ant-descriptions-title {
  background: rgba(10, 44, 81, 0.6);
  // height: 40px !important;
  padding-left: 20px;
  // line-height: 40px !important;
  color: #b3f5ff;
}

.color-dess .ant-descriptions-item-label {
  background: rgba(10, 44, 81, 0.6);
  width: 50%;
  // min-width: 145px;
  // height: 40px !important;
  // line-height: 40px !important;
  text-align: center;
  color: #b3f5ff;
  // font-size: 18px;
}

.color-dess .ant-descriptions-item-content {
  // height: 40px !important;
  // line-height: 40px !important;
  background: linear-gradient(to right, rgba(11, 50, 85, 0.8), rgba(141, 136, 136, 0.01));
  // width: 50%;
  // padding: 0px 10px;
  color: #26fbf3;
  // font-size: 18px;
}
</style>
